import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { TouchableOpacity, FlatList, View, Image, Text } from 'react-native'
import Button from './Button'
import Icon from 'react-native-vector-icons/FontAwesome'

import styles from './Styles/OrderListStyle'

export default class OrderList extends Component {
  // Prop type warnings
  static propTypes = {
    style: PropTypes.object,
    data: PropTypes.array,
    navigation: PropTypes.object,
  }
  
  // Defaults for props
  static defaultProps = {
    data: null
  }

  _goDetail(id) {
    this.props.navigation.navigate('OrderDetailScreen', {id:id})
  }
  _goPay(id, money) {
    this.props.navigation.navigate('PayScreen',
      {id:id,money:money})
  }
  _goEvaluation(id) {
    this.props.navigation.navigate('EvaluationScreen', {id:id})
  }

  render () {
    const { navigate } = this.props.navigation
    if (!this.props.data) {
      return (
        <View style={styles.empty}>
          <Icon name='coffee' size={60} color='#4CD4B0' />
          <Text style={{marginTop:5}}>您的订单列表为空</Text>
        </View>
      )
    }
    return (
      <FlatList
        data={this.props.data}
        style={[styles.container, this.props.style]}
        keyExtractor={(item,index)=>item.id}
        renderItem={({item, index}) => (
          <View style={styles.item} key={index}>
            <TouchableOpacity style={styles.header}
              onPress={()=>navigate('OrderDetailScreen', {id:item.id})}>
              {item.artificer.id ? (
                <View style={styles.headerLeft}>
                  <Image source={{uri:item.artificer.img}} style={styles.avatar} />
                  <Text style={styles.name}>{item.artificer.name}</Text>
                </View>
              ) : (
                <View style={styles.headerLeft}>
                  <Image source={{uri:'http://p3.wmpic.me/article/2014/09/17/1410941012_qxRBzzAc.jpeg'}} style={styles.avatar} />
                  <Text style={styles.name}>未分配</Text>
                </View>
              )}
              <Text>{item.order_status}</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.main}
              onPress={()=>navigate('OrderDetailScreen', {id:item.id})}>
              {item.detail && item.detail.map((item2, i) => (
                <View style={styles.mainItem} key={i}>
                  <Text>{item2.name}</Text>
                  <Text>x{item2.sum}</Text>
                </View>
              ))}
            </TouchableOpacity>
            <View style={styles.action}>
              <Button medium default title='详情'
                onPress={()=>this._goDetail(item.id)} />
              {item.status === 'requested' &&
              <Button medium title='支付' style={{marginRight:10}}
                onPress={()=>this._goPay(item.id, item.order_amount)} />
              }
              {item.status === 'complete' && item.is_comment == 0 &&
              <Button medium title='评价' style={{marginRight:10}}
                onPress={()=>this._goEvaluation(item.id)} />
              }
            </View>
          </View>
        )}
      />
    )
  }
}
